<template>
    <el-dialog v-model="dialogVisible" draggable title="发起事项" :append-to-body="true" width="60%" @close="dialogClose">
        <div class="matter-list">
            <div class="card-body" v-for="item in matterList" :key="item.id">
                <div class="card-title">{{ item.name }}</div>
                <el-divider/>
                <div class="tag-list" v-for="matter in item['matterItems']" :key="matter.code">
                    <el-tag class="mouse-slide" @click="openMatter(matter)">{{ matter.name }}</el-tag>
                </div>
            </div>
        </div>

        <report v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
        <purchase-order v-model:code="selectedCode" :supplier="detailForm.id"/>

        <el-dialog v-model="matterVisible" :append-to-body="true" width="60%" :title="selectedName">
            <minimalism-form v-if="selectedCode == 'MINIMALISM'" v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
            <communication-form v-else-if="selectedCode == 'COMMUNICATION'" v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" :supplier-id="detailForm.id"/>
            <enquiry-price v-else-if="selectedCode == 'ENQUIRY_PRICE'" v-model:code="selectedCode" :supplier-id="detailForm.id"/>
            <visit-reception v-else-if="selectedCode == 'VISIT_RECEPTION'" v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
            <fill-in-form v-else-if="selectedCode == 'FILL_IN_FORM'" v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers"/>
            <online-meeting v-else-if="selectedCode == 'NETWORK_MEETING'" v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
            <scheme v-else-if="selectedCode == 'SCHEME'" v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
            <graphic-designer v-else-if="selectedCode == 'ART_DESIGNER'" v-model:code="selectedCode" v-model:relate-item="relateItem" v-model:enterprise-users="enterpriseUsers" v-model:remind-times="remindTimes"/>
            <quotation-order v-else-if="selectedCode == 'QUOTATION_ORDER'" v-model:code="selectedCode" :supplier-id="detailForm.id"/>
            <work-contact-letter v-else-if="selectedCode == 'WORK_CONTACT_LETTER'" v-model:code="selectedCode" :supplier-id="detailForm.id"/>
            <receive-collection v-else-if="selectedCode == 'RECEIVE_COLLECTION'" v-model:code="selectedCode" v-model:customer-id="detailForm.id" :relatable-map="relateMap"/>
            <official-sale-collection v-else-if="selectedCode == 'OFFICIAL_SALE_COLLECTION'" v-model:code="selectedCode" v-model:order-id="detailForm.id" v-model:customer-id="detailForm['customerId']" :relatable-map="relateMap"/>   <!-- 此时传入的detailForm应当是订单 -->
            <other-pay v-else-if="selectedCode == 'OTHER_PAY'" v-model:code="selectedCode" :relatable-map="relateMap"/>
            <bad-debt-receivable v-else-if="selectedCode == 'BAD_DEBT_RECEIVABLE'" v-model:code="selectedCode" v-model:customer-id="detailForm.id" :relatable-map="relateMap"/>
            <imprest v-else-if="selectedCode == 'IMPREST'" v-model:code="selectedCode"/>
            <imprest-repay v-else-if="selectedCode == 'IMPREST_REPAY'" v-model:code="selectedCode"/>
            <other-collection v-else-if="selectedCode == 'OTHER_COLLECTION'" v-model:code="selectedCode" :relatable-map="relateMap"/>
            <purchase-pay v-else-if="selectedCode == 'PURCHASE_PAY'" v-model:code="selectedCode" :relatable-map="relateMap"/>
            <reimburse-receipt v-else-if="selectedCode == 'REIMBURSE_RECEIPT'" v-model:code="selectedCode"/>
            <zero-charge v-else-if="selectedCode == 'ZERO_CHARGE'" v-model:code="selectedCode" v-model:customer-id="detailForm.id" :relatable-map="relateMap"/>
            <invoice-dispatch v-else-if="selectedCode == 'INVOICE_DISPATCH'" v-model:code="selectedCode" v-model:customer-id="detailForm.id" :relatable-map="relateMap"/>
        </el-dialog>
    </el-dialog>
</template>

<script>
// 各数据详情页通用拉起事项组件
import {computed, reactive, toRefs} from 'vue'
import {getModuleList} from '/@/api/matter'
import {getRemindTimes} from '/@/api/matter'
import {getEnterpriseUsers} from '/@/api/sys/user'
import {getRelatableMap} from '/@/api/matter'

import Scheme from '/@/views/matter/common/Scheme.vue'  // 方案
import Report from '/@/views/matter/common/Report.vue'  // 报告
// import Minimalism from '/@/views/matter/common/Minimalism.vue'    // 极简事项
import MinimalismForm from '/@/views/matter/components/MinimalismForm.vue'    // 极简事项
import FillInForm from '/@/views/matter/common/FillInForm.vue'    // 填表
import OnlineMeeting from '/@/views/matter/common/OnlineMeeting.vue'  // 线上会议
// import Communication from '/@/views/matter/common/Communication.vue'  // 沟通与联系
import CommunicationForm from '/@/views/matter/components/CommunicationForm.vue'  // 沟通与联系
import VisitReception from '/@/views/matter/common/VisitReception.vue'    // 来访接待
import PurchaseOrder from '/@/views/matter/supplier/PurchaseOrder.vue'  // 采购单
import GraphicDesigner from '/@/views/matter/common/GraphicDesigner.vue'  // 设计/美工
import QuotationOrder from '/@/views/matter/supplier/QuotationOrder.vue'  // 报价单
import EnquiryPrice from '/@/views/matter/supplier/EnquiryPrice.vue'  // 询价
import WorkContactLetter from '/@/views/matter/supplier/WorkContactLetter.vue'  // 工作联系函
// -------------------------------- 钱 开始 -------------------------------- //
import ReceiveCollection from '/@/views/matter/money/ReceiveCollection.vue'   // 应收回款
import OfficialSaleCollection from '/@/views/matter/money/OfficialSaleCollection.vue'   // 官网销售收款
import OtherPay from '/@/views/matter/money/OtherPay.vue'   // 其他付款
import BadDebtReceivable from '/@/views/matter/money/BadDebtReceivable.vue'   // 应收坏账
import Imprest from '/@/views/matter/money/Imprest.vue'   // 备用金
import ImprestRepay from '/@/views/matter/money/ImprestRepay.vue'   // 备用金还款
import OtherCollection from '/@/views/matter/money/OtherCollection.vue'   // 其他收款
// import OtherReceivable from '/@/views/matter/money/OtherReceivable.vue'   // 其他应收
import PurchasePay from '/@/views/matter/money/PurchasePay.vue'   // 采购付款
import ReimburseReceipt from '/@/views/matter/money/ReimburseReceipt.vue'   // 报销单
// import SaleReceivable from '/@/views/matter/money/SaleReceivable.vue'   // 销售应收
import ZeroCharge from '/@/views/matter/money/ZeroCharge.vue'   // 抹零扣费
import InvoiceDispatch from '/@/views/matter/money/InvoiceDispatch.vue'   // 开票申请
// -------------------------------- 钱 结束 -------------------------------- //

export default {
    name: 'LaunchMatter',
    emits: ['closeCallback'],
    components: {
        Scheme,
        Report,
        MinimalismForm,
        FillInForm,
        CommunicationForm,
        OnlineMeeting,
        PurchaseOrder,
        VisitReception,
        GraphicDesigner,
        QuotationOrder,
        EnquiryPrice,
        WorkContactLetter,
        ReceiveCollection,
        OfficialSaleCollection,
        OtherPay,
        OtherCollection,
        BadDebtReceivable,
        Imprest,
        ImprestRepay,
        PurchasePay,
        ReimburseReceipt,
        // OtherReceivable,
        // SaleReceivable,
        ZeroCharge,
        InvoiceDispatch
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        moduleCode: {   // 业务菜单编码Customer、Project、Staff....
            type: String,
            default: null
        },
        relateItem: {   // 关联项
            type: Object,
            default: null
        },
        detailForm: {   // 详情数据
            type: Object,
            default: {
                id: null
            }
        },
        matterData: {   // 默认打开的事项表单, 自动填入事项数据
            type: Object,
            default: null
        }
    },
    setup(props, context) {
        const {visible, moduleCode, relateItem, matterData} = toRefs(props)
        const dialogVisible = computed({
            get: () => {
                if (visible.value) {
                    getModuleList(moduleCode.value).then(res => {
                        state.matterList = res.data
                        // state.matterList[0].matterItems.push({
                        //   code: 'INVOICE_DISPATCH',
                        //   name: '开票申请'
                        // })
                        // if (matterData.value != null) {
                        //   state.selectedCode = matterData.value.code
                        //   // TODO 根据事项id获取事项详情，事项表单需要添加编辑处理
                        // }
                    }).catch(e => console.log(e))
                    getEnterpriseUsers().then(res => state.enterpriseUsers = res.data).catch(e => console.log(e))
                    getRemindTimes().then(res => state.remindTimes = res.data).catch(e => console.log(e))
                    getRelatableMap().then(res => state.relateMap = res.data).catch(e => console.log(e))
                }
                return visible.value
            },
            set: val => context.emit('update:visible', val)
        })
        const matterVisible = computed({
            // get: () => state.selectedCode != null && state.selectedCode != '',
            get: () => state.selectedCode != null && state.selectedCode != '' && state.selectedCode != 'REPORT' && state.selectedCode != 'PURCHASE_ORDER',
            set: val => {
                if (!val) {
                    state.selectedCode = state.selectedName = null
                }
            }
        })
        const state = reactive({
            selectedCode: '',
            selectedName: null,
            enterpriseUsers: [],
            remindTimes: [],
            relateMap: {},    // 业务编码对应的可关联项对象 Staff -> ... Supplier -> ...
            matterList: []  // 可发起事项列表
        })

        const openMatter = (matterItem) => {
            state.selectedCode = matterItem.code
            state.selectedName = matterItem.name
        }
        const dialogClose = () => {
            context.emit('closeCallback')
        }

        return {
            dialogVisible,
            moduleCode,
            relateItem,
            openMatter,
            matterVisible,
            ...toRefs(state),
            dialogClose
        }
    }
}
</script>

<style scoped lang="scss">
.el-form-item {
    align-items: start;
    flex: 1;
}

.matter-list {
    width: 100%;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;

    .card-body {
        width: 160px;
        min-width: 120px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;

        .card-title {
            font-size: 15px;
            font-weight: bold;
        }

        .tag-list {
            margin-bottom: 15px;

            .mouse-slide {
                cursor: pointer;
            }
        }
    }
}
</style>
